<template>
  <el-form-item class="edit-item edit-item-action action" style="position:relative;">
    <slot name="label">
      <label style="max-width: 95px; line-height: 16px;">
        {{label}}
        <TooltipsCommon v-if="!!tooltips" :tooltips="tooltips"></TooltipsCommon>
      </label>
    </slot>

    <p style="flex: 1;" :class="{'action-select': !disabled}" @click="selectEvent">
      <el-input v-model="modelValue" placeholder="请输入内容" :disabled="toBool(disabled)"></el-input>
    </p>
  </el-form-item>
</template>

<script>
  import { EventBus } from '@/store/index.js';
  import { defineAsyncComponent } from 'vue';
  export default {
    props: ['label', 'value', 'modelValue', 'param_id', 'button', 'com_id', 'disabled', 'tooltips'],
    components: {
      TooltipsCommon: defineAsyncComponent(() => import('@/views/components/edit/comps/TooltipCommon.vue')),
    },
    mounted() {
      // 1. param_id
      // console.log('param_id: ', this.param_id);

      // 2. eventChange
      EventBus.$on('eventChange', this.handlerEventChange);
    },
    methods: {
      selectEvent() {
        if( !this.disabled ) {
          EventBus.$emit('selectEvent', {
            id: this.param_id,
            label: this.label,
            value: this.value,
            button: this.button,
            com_id: this.com_id,
          });
        }
      },
      handlerEventChange(args) {
        if( args && this.param_id == args.id ) this.$emit('change', args.value);
      },
      toBool(val) {
        return typeof val === "boolean" ? val
          : val === "true" ? true : false;
      }
    },
    // beforeUnmount() {
    //   // 此处不可 off ，会清除所有 eventChange
    //   EventBus.$off('eventChange');
    // },
  }
</script>

<style lang="scss">
  .action-select {
    position: relative;

    &::before {
      position: absolute;
      content: '点击选择';
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      background: rgba(255, 255, 255, .9);
      opacity: 0;
      z-index: 9;
      transition: opacity .3s ease;
    }

    &:hover::before {
      opacity: 1;
    }
  }
</style>
